<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {downloadGenerator, generatorDetail} from "@/utils/generator";
import {CirclePlusFilled, House} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const route = useRoute()
const router = useRouter()
const id = ref(route.params.id)
const data = ref({} as any)

const submit = async () => {
  const res = await generatorDetail(id.value)
  data.value = res.data.data
}
const download = async () => {
  try {
    const res = await downloadGenerator(id.value)
    ElMessage.success('下载成功')
  } catch (e) {
    ElMessage.error('下载失败')
  }

}

onMounted(() => {
  submit()
})
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- 增强的头部 -->
      <el-header class="main-header">
        <div class="header-brand">
          <img src="@/assets/logo.svg" alt="鱼籽代码生成器" class="logo">
          <h1 class="title">鱼籽代码生成器</h1>
        </div>

        <nav class="nav-container">
          <el-button link class="nav-item" @click="router.push('/main')">
            <el-icon><House/></el-icon>
            <span>主页</span>
          </el-button>
          <el-button link class="nav-item" @click="router.push('/add')">
            <el-icon><CirclePlusFilled/></el-icon>
            <span>创建生成器</span>
          </el-button>
        </nav>

        <div class="user-actions">
          <el-button type="primary" plain class="action-btn">
            <router-link to="/login" class="action-link">登录</router-link>
          </el-button>
          <el-button type="success" plain class="action-btn">
            <router-link to="/register" class="action-link">注册</router-link>
          </el-button>
        </div>
      </el-header>

      <el-main>
        <!-- 信息展示卡片 -->
        <el-card class="detail-card">
          <div class="base-information">
            <el-descriptions title="生成器详情" border class="descriptions-container">
              <el-descriptions-item
                :rowspan="2"
                :width="140"
                label="图片"
                align="center"
              >
                <el-image
                  :src="data.picture"
                  class="preview-image"
                  fit="cover"
                />
              </el-descriptions-item>
              <el-descriptions-item label="名称" label-class-name="desc-label">{{ data.name }}</el-descriptions-item>
              <el-descriptions-item label="描述">{{ data.description }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ data.createTime }}</el-descriptions-item>
              <el-descriptions-item label="基础包">{{ data.basePackage }}</el-descriptions-item>
              <el-descriptions-item label="版本">{{ data.version }}</el-descriptions-item>
              <el-descriptions-item label="作者">{{ data.author }}</el-descriptions-item>
              <el-descriptions-item label="标签">
                <div class="tag-group">
                  <el-tag
                    v-for="(tag, index) in data.tags"
                    :key="index"
                    class="mx-1 custom-tag"
                    effect="light"
                    round
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </el-descriptions-item>
            </el-descriptions>

            <!-- 增强的表格 -->
            <el-table
              :data="[data]"
              stripe
              class="generator-table"
              header-row-class-name="table-header"
            >
              <el-table-column prop="name" label="名称" width="180" align="center"/>
              <el-table-column prop="description" label="描述" min-width="220"/>
              <el-table-column prop="createTime" label="创建时间" width="200" align="center"/>
              <el-table-column prop="basePackage" label="基础包" width="180" align="center"/>
              <el-table-column prop="version" label="版本" width="120" align="center"/>
              <el-table-column prop="author" label="作者" width="150" align="center"/>

              <el-table-column label="标签" width="200" align="center">
                <template #default="{ row }">
                  <el-scrollbar max-height="100px">
                    <div class="tag-group">
                      <el-tag
                        v-for="(tag, index) in row.tags"
                        :key="index"
                        class="mx-1 custom-tag"
                        effect="plain"
                        round
                      >
                        {{ tag }}
                      </el-tag>
                    </div>
                  </el-scrollbar>
                </template>
              </el-table-column>

              <el-table-column label="用户信息" width="200" align="center">
                <template #default="{ row }">
                  <div class="user-info">
                    <div class="username">{{ row.user.userName }}</div>
                    <el-text class="user-profile" truncated>{{ row.user.userProfile }}</el-text>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="文件配置" min-width="300">
                <template #default="{ row }">
                  <el-collapse v-if="row.fileConfig" class="config-collapse">
                    <el-collapse-item title="查看配置详情" name="1">
                      <ul class="config-list">
                        <li><span class="config-label">输入根路径:</span> {{ row.fileConfig.inputRootPath || '未设置' }}</li>
                        <li><span class="config-label">输出根路径:</span> {{ row.fileConfig.outputRootPath || '未设置' }}</li>
                        <li><span class="config-label">源根路径:</span> {{ row.fileConfig.sourceRootPath || '未设置' }}</li>
                        <li><span class="config-label">类型:</span> {{ row.fileConfig.type || '未设置' }}</li>
                        <li>
                          <span class="config-label">文件列表:</span>
                          <ul v-if="row.fileConfig.files?.length" class="file-list">
                            <li v-for="(file, index) in row.fileConfig.files" :key="index">
                              <el-text type="info">{{ file }}</el-text>
                            </li>
                          </ul>
                          <span v-else>无</span>
                        </li>
                      </ul>
                    </el-collapse-item>
                  </el-collapse>
                  <span v-else>无</span>
                </template>
              </el-table-column>

              <el-table-column label="模型配置" min-width="300">
                <template #default="{ row }">
                  <el-collapse v-if="row.modelConfig?.models?.length" class="config-collapse">
                    <el-collapse-item title="查看模型配置" name="1">
                      <ul class="model-list">
                        <li v-for="(model, index) in row.modelConfig.models" :key="index">
                          <div class="model-item">
                            <el-text class="model-index">模型 {{ index + 1 }}</el-text>
                            <el-text class="model-content">{{ model }}</el-text>
                          </div>
                        </li>
                      </ul>
                    </el-collapse-item>
                  </el-collapse>
                  <span v-else>无</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
        <el-button type="primary">立即使用</el-button>
        <el-button type="primary" @click="download">下载</el-button>
      </el-main>

      <!-- 增强的页脚 -->
      <el-footer class="footer">
        <el-card shadow="hover" class="footer-card">
          <div class="footer-content">
            <a href="https://gitee.com/wangfenghuan3399/yuzi-generator" target="_blank" class="footer-link">
              <img src="@/assets/gitee.svg" alt="Gitee开源仓库" class="gitee-logo">
              <span class="footer-text">访问我们的Gitee开源仓库</span>
              <el-icon class="external-link"><TopRight/></el-icon>
            </a>
          </div>
        </el-card>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped lang="less">
@primary-color: #409EFF;
@success-color: #67C23A;
@warning-color: #E6A23C;
@error-color: #F56C6C;
@info-color: #909399;

.common-layout {
  height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

  .main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding: 0 40px;
    height: 64px;
    position: sticky;
    top: 0;
    z-index: 1000;

    .header-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      transition: transform 0.3s ease;

      &:hover {
        transform: translateX(-5px);
      }

      .logo {
        height: 40px;
        filter: drop-shadow(0 2px 4px rgba(@primary-color, 0.2));
      }

      .title {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        background: linear-gradient(45deg, @primary-color, lighten(@primary-color, 20%));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .nav-container {
      display: flex;
      gap: 24px;
      margin-left: 40px;

      .nav-item {
        padding: 8px 16px;
        border-radius: 8px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        &:hover {
          background: rgba(@primary-color, 0.1);
          transform: translateY(-2px);

          span {
            color: @primary-color;
          }

          .el-icon {
            color: @primary-color;
          }
        }

        span {
          margin-left: 8px;
          font-weight: 500;
          color: @info-color;
        }
      }
    }

    .user-actions {
      .action-btn {
        transition: all 0.3s ease;

        &:hover {
          transform: scale(1.05);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
      }

      .action-link {
        color: inherit;
        text-decoration: none;
        font-weight: 500;
        padding: 0 12px;
        display: block;
      }
    }
  }

  .detail-card {
    max-width: 1400px;
    margin: 24px auto;
    border-radius: 16px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: none;

    .descriptions-container {
      margin: 20px 0;

      :deep(.el-descriptions__header) {
        margin-bottom: 24px;
      }

      :deep(.el-descriptions__title) {
        font-size: 24px;
        color: #1a1a1a;
        position: relative;
        padding-left: 16px;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 20px;
          background: @primary-color;
          border-radius: 2px;
        }
      }

      .preview-image {
        width: 120px;
        height: 120px;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;

        &:hover {
          transform: rotate(2deg) scale(1.05);
        }
      }

      .tag-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .custom-tag {
          padding: 4px 12px;
          border-width: 2px;
        }
      }
    }

    .generator-table {
      margin-top: 24px;

      :deep(.table-header) {
        th {
          background: rgba(@primary-color, 0.08) !important;
          font-weight: 600;
          color: darken(@primary-color, 10%);
        }
      }

      .user-info {
        .username {
          font-weight: 500;
          margin-bottom: 4px;
        }

        .user-profile {
          color: @info-color;
          font-size: 12px;
        }
      }

      .config-collapse {
        border: none;

        :deep(.el-collapse-item__header) {
          font-weight: 500;
          color: @primary-color;
        }

        .config-list {
          padding-left: 16px;
          color: @info-color;

          .config-label {
            color: darken(@info-color, 20%);
            font-weight: 500;
            margin-right: 8px;
          }

          .file-list {
            margin-top: 4px;
            padding-left: 16px;
          }
        }

        .model-list {
          .model-item {
            display: flex;
            align-items: baseline;
            margin-bottom: 8px;

            .model-index {
              flex: 0 0 60px;
              font-weight: 500;
              color: @primary-color;
            }

            .model-content {
              flex: 1;
              color: @info-color;
            }
          }
        }
      }
    }
  }

  .footer {
    padding: 20px 40px;
    margin-top: auto;

    .footer-card {
      border: none;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(4px);
      border-radius: 12px;

      .footer-link {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        &:hover {
          transform: translateY(-2px);

          .footer-text {
            color: @primary-color;
          }

          .gitee-logo {
            filter: brightness(1.2) drop-shadow(0 2px 4px rgba(@primary-color, 0.2));
          }

          .external-link {
            transform: translate(2px, -2px);
          }
        }

        .gitee-logo {
          width: 32px;
          height: 32px;
          transition: all 0.3s ease;
        }

        .footer-text {
          color: @info-color;
          font-weight: 500;
          transition: color 0.3s ease;
        }

        .external-link {
          color: @info-color;
          font-size: 14px;
          transition: all 0.3s ease;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .common-layout {
    .main-header {
      padding: 0 16px;
      flex-wrap: wrap;
      height: auto;
      padding: 12px;

      .header-brand {
        width: 100%;
        justify-content: center;
        margin-bottom: 12px;
      }

      .nav-container {
        margin: 12px 0;
        flex-wrap: wrap;
        justify-content: center;
      }

      .user-actions {
        width: 100%;
        display: flex;
        justify-content: center;
      }
    }

    .detail-card {
      margin: 12px;
      border-radius: 12px;

      .generator-table {
        :deep(.el-table__body-wrapper) {
          overflow-x: auto;
        }
      }
    }

    .footer {
      padding: 12px;
    }
  }
}
</style>
